Example: Using Popup with Barikoi GL

Introduction

This guide demonstrates how to add a popup to a map using the bkoi-gl package in a React component. Popups allow you to display information about a specific location on the map when it is clicked or hovered over.

Example

"use client";
import { useEffect, useRef } from "react";
import { Map, Popup } from "bkoi-gl";
import "bkoi-gl/dist/style/bkoi-gl.css";

const MainMap = () => {
  // Reference to the map container HTML element
  const mapContainer = useRef(null);
  // Reference to the map instance
  const map = useRef(null);

  useEffect(() => {
    // Initialize the map only if it has not been initialized yet
    if (map.current) return;

    // Create a new map instance and assign it to the map reference
    map.current = new Map({
      container: mapContainer.current, // The HTML element that will contain the map
      center: [90.39017821904588, 23.719800220780733], // Initial center of the map ([longitude, latitude])
      zoom: 10, // Initial zoom level of the map
      doubleClickZoom: false, // Disable zoom on double-click
      accessToken: "YOUR_BARIKOI_API_KEY_HERE", // Access token for the bkoi-gl service
    });

    // Create a new popup and set its position and content
    const popup = new Popup({ closeOnClick: false })
      .setLngLat([90.36402, 23.82373]) // Position of the popup ([longitude, latitude])
      .setHTML("<h1>Barikoi!</h1>") // Content of the popup
      .addTo(map.current); // Add the popup to the map instance
  }, []); // Empty dependency array means this effect runs once on component mount

  // Render the map container with full width and height
  return <div ref={mapContainer} style={containerStyles} />;
};

// Define styles for the map container to fill the viewport
const containerStyles = {
  width: "100%", // Full width of the container
  height: "100vh", // Full viewport height
  minHeight: "400px", // Minimum height of 400px
  overflow: "hidden", // Hide scrollbars
};

export default MainMap;